[dev-v5] Add Vertical Bar Chart variants - #5068
Draft
Vincent Baaij (vnbaaij) wants to merge 78 commits into
Draft
Conversation
Vincent Baaij (vnbaaij)
commented
Aug 3, 2026
Vincent Baaij (vnbaaij)
commented
Collaborator
- Add GroupedVerticalBarChart
- Add VerticalBarChart
- Add VerticalStackedBarChart
…kage so there isno chart related code in the core scripts anymore.
…b-component package but finished source is copied here. This because we cannot publisch/update the npm package
…os and docs pages
- Organize examples
- Ignore playwright screenshots and chart-comments files
- Fix HBCWA color handling - Fix HBCWA Blazor example
- Update docs
…-specific packages
- Re-add Core SDK 9.0.300 build fix
…ents can render custom tooltips
- Add/move ChartBase/CartesianBse parameters
- Update chart wc scripts - Add and update tests
…om/microsoft/fluentui-blazor into users/vnbaaij/dev-v5/add-areachart
- Fix roundBoxes passing through
…ticalStackedBarChart
Contributor
There was a problem hiding this comment.
Pull request overview
Adds new vertical bar chart variants to the FluentUI Blazor charts package by introducing new payload model types and System.Text.Json source-generator contexts, plus demo documentation/examples intended to showcase the new charts.
Changes:
- Added model records and source-generated JSON serializer contexts for VerticalBarChart, GroupedVerticalBarChart, and VerticalStackedBarChart payloads.
- Extended the shared
ChartJsonhelper with a new vertical bar serialization overload. - Added demo docs/pages/examples and updated demo configuration defaults for charts.
Reviewed changes
Copilot reviewed 19 out of 22 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Charts/Serialization/VerticalStackedBarChartDataJsonSerializerContext.cs | Adds STJ source-generator context for vertical stacked bar payloads. |
| src/Charts/Serialization/VerticalBarChartDataJsonSerializerContext.cs | Adds STJ source-generator context for vertical bar payloads. |
| src/Charts/Serialization/GroupedVerticalBarChartDataJsonSerializerContext.cs | Adds STJ source-generator context for grouped vertical bar payloads. |
| src/Charts/Models/VerticalStackedBarChart/VerticalStackedBarChartSeries.cs | Adds series payload record for vertical stacked bars. |
| src/Charts/Models/VerticalStackedBarChart/VerticalStackedBarChartDataPoint.cs | Adds data point payload record for vertical stacked bars. |
| src/Charts/Models/VerticalBarChart/VerticalBarChartSeries.cs | Adds series payload record for vertical bar charts. |
| src/Charts/Models/VerticalBarChart/VerticalBarChartDataPoint.cs | Adds data point payload record for vertical bar charts. |
| src/Charts/Models/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisSeries.cs | Adds a series payload record under the with-axis model folder. |
| src/Charts/Models/GroupedVerticalBarChart/GroupedVerticalBarChartSeries.cs | Adds series payload record for grouped vertical bars. |
| src/Charts/Models/GroupedVerticalBarChart/GroupedVerticalBarChartDataPoint.cs | Adds data point payload record for grouped vertical bars. |
| src/Charts/Infrastructure/ChartJson.cs | Adds a Serialize(IReadOnlyList<VerticalBarChartSeries>) helper (and should likely be expanded for the other new variants). |
| src/Charts/Charts/VerticalStackedBarChart/FluentVerticalStackedBarChart.razor | Added new component wrapper file (currently empty). |
| src/Charts/Charts/VerticalBarChart/FluentVerticalBarChart.razor | Added new component wrapper file (currently empty). |
| src/Charts/Charts/GroupedVerticalBarChart/FluentGroupedVerticalBarChart.razor | Added new component wrapper file (currently empty). |
| src/Charts.Scripts/src/chart-legend/chart-legend.definition.ts | Modified chart-legend definition (currently contains unresolved merge conflict markers). |
| examples/Demo/FluentUI.Demo/Program.cs | Sets a default chart configuration (RoundedCorners) for the demo. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentVerticalStackedBarChart.md | Adds documentation page for vertical stacked bar chart. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentVerticalBarChart.md | Adds documentation page for vertical bar chart. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentGroupedVerticalBarChart.md | Adds documentation page for grouped vertical bar chart. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/VerticalStackedBarChart/VerticalStackedBarChartDefault.razor | Adds demo example (currently shows a donut chart). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/VerticalBarChart/VerticalBarChartDefault.razor | Adds demo example (currently shows a donut chart). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.razor | Adds demo example (currently shows a donut chart). |
Suppressed comments (1)
src/Charts.Scripts/src/chart-legend/chart-legend.definition.ts:19
- The element definition block still contains merge conflict markers and mixes two different definition patterns. Other chart components in this package use a PartialFASTElementDefinition object with FluentDesignSystem.registry and shadowOptions.
<<<<<<< HEAD
export const definition = ChartLegend.compose({
name: `${FluentDesignSystem.prefix}-chart-legend`,
template,
styles,
Comment on lines
+80
to
89
| /// <summary> | ||
| /// Serializes vertical bar chart data using the vertical bar chart serializer context. | ||
| /// </summary> | ||
| /// <param name="value">The vertical bar chart series collection.</param> | ||
| /// <returns>A JSON string suitable for the <c>fluent-vertical-bar-chart</c> component.</returns> | ||
| public static string Serialize(IReadOnlyList<VerticalBarChartSeries> value) => | ||
| JsonSerializer.Serialize( | ||
| value, | ||
| VerticalBarChartDataJsonSerializerContext.Default.IReadOnlyListVerticalBarChartSeries); | ||
| } |
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.8%
Microsoft.FluentUI.AspNetCore.Components.Charts - 90.1%
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.